import {defineComponent, onMounted, ref} from 'vue';
import { useRouter } from 'vue-router';
import './xxAddressInput.scss';
import BreadCrumb from "@/components/BreadCrumb";
import {ElInput, ElMessageBox} from "element-plus";
import {UserInfo} from "@/components/UserInfo";

export default defineComponent({
    setup() {
        const router = useRouter();
        const address = ref('');
        // 明确指定 ref 的类型为 ElInput 组件的实例类型
        const addressInputRef = ref<InstanceType<typeof ElInput> | null>(null);
        const focusInput = () => {
            if (addressInputRef.value) {
                addressInputRef.value.focus();
            }
        };
        const handleConfirm = () => {
            if (!address.value.trim()) {
                ElMessageBox({
                    title: '提示！',
                    message: () => <span style={{fontSize: '188%'}}>请输入详细地址！</span>,
                    confirmButtonText: '确认',

                })
                return;
            }
            // 这里可以将 address 的值传递给其他页面，比如通过路由参数
            router.push({
                path: '/PhoneInput',
                query: { address: address.value },
            });
        };
        // 场景1：页面加载完成后自动聚焦（适合移动端引导输入）
        onMounted(() => {
            // 延迟一点执行，确保组件已完全渲染
            setTimeout(focusInput, 100);
        });
        return () => (<>
                <UserInfo></UserInfo>
                {/* 场景2：点击输入框外部区域也能触发聚焦（可选）onClick={focusInput} */}
            <div class="address-input-container" onClick={focusInput}>
                <div class="title">
                    <div>
                        <BreadCrumb />
                    </div>
                </div>


                    {/*<h1 style={{marginTop: '10%',marginLeft:'40%',}}>请输入详细地址</h1>*/}
                    <ElInput
                        ref={addressInputRef}
                        v-model={address.value}
                        style={{marginLeft:'30%',marginTop:'5%'}}
                        rows={4}
                        type="textarea"
                        placeholder="请输入详细地址，点击此处输入"
                        class="address-input"
                        auto-focus  // 可选：页面加载时自动聚焦并弹出键盘
                    /><br />
                    <button style={{marginLeft:'38%',marginTop:'5%'}} onClick={handleConfirm} class="confirm-btn">
                        确认
                    </button>

            </div>
            </>
        );
    },
});
